<template>
    <footer class="bg-dark text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <div class="flex items-center mb-4">
              <i class="fa fa-robot text-primary text-2xl mr-2"></i>
              <span class="font-bold text-xl">AI助手</span>
            </div>
            <p class="text-gray-400 mb-4">强大的AI助手平台，为您提供智能对话、内容生成、数据分析等全方位AI服务。</p>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-weibo"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-wechat"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-github"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-twitter"></i>
              </a>
            </div>
          </div>
          
          <div>
            <h3 class="font-bold text-lg mb-4">产品</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">聊天助手</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">内容生成</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">数据分析</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API接口</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">企业解决方案</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="font-bold text-lg mb-4">资源</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">文档中心</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API参考</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">示例代码</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">常见问题</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">技术博客</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="font-bold text-lg mb-4">公司</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">关于我们</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">联系我们</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">服务条款</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">加入我们</a></li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-500 text-sm">© 2025 AI助手. 保留所有权利。</p>
          <div class="mt-4 md:mt-0">
            <select class="bg-gray-800 text-gray-400 text-sm rounded-md px-3 py-1 border border-gray-700 focus:outline-none focus:ring-1 focus:ring-primary">
              <option>简体中文</option>
              <option>English</option>
            </select>
          </div>
        </div>
      </div>
    </footer>
  </template>
  
  <script>
  export default {
    name: 'Footer'
  }
  </script>
      